<template>
  <div>
    <!-- 演示用,与本项目无关
    <div @click="test">Class030</div>-->
    <van-search
      v-model="key_word"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="ipt_search"
      @input="ipt_input"
    />
    <div class="search_content">
      <div class="hot_word" v-if="!search_res.length">
        <div>搜索热词</div>
        <ul>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
          <li>11111</li>
        </ul>
      </div>
      <div v-else class="search_res">
        <song
          v-for="(el,idx) in search_res"
          :key="el.id"
          :song_data="{
            song_name:el.name,
            ars:el.artists,
            album_name:el.album.name,
            id:el.id
          }"
          :id_list="id_list"
          :idx="idx"
        ></song>
      </div>
    </div>
  </div>
</template>

<script>
import { search } from "../../api/search";
import song from "../../components/song";
export default {
  data() {
    return {
      key_word: "海阔天空",
      search_res: [],
    };
  },
  components: {
    song,
  },
  computed: {
    id_list() {
      return this.search_res.map((el) => el.id);
    },
  },
  methods: {
    ipt_search(val) {
      // console.log(val);
      search(val).then((res) => {
        console.log("搜索结果", res.data.result.songs);
        this.search_res = res.data.result.songs;
      });
    },
    ipt_input(val) {
      console.log(val);
      // 如果删除至 空,则把 search_res 置空, 让页面呈现 搜索热词模块, 而不是搜索结果;
      if (!val) {
        this.search_res = [];
      }
    },
    // test() {
    // 可以通过 $root $parent $children 等一系列组件间的关系属性来访问对应实例,
    // 从而调用对应实例身上的方法
    //   console.log(this.$parent.$parent.$children);
    // },
  },
};
</script>

<style lang="scss" scoped>
</style>